<!--  -->
<template>
<div class='bonus-page'>
  <c-title text="小红花明细"></c-title>
  <div class="account-list" v-if="bonusList.length > 0 ">
    <block v-for="(item,index) in bonusList" :key="index">
      <div class="account-box">
        <div class="account-order flex-a-c flex-j-sb">
          <h3>{{item.change_name}}</h3>
          <p :class="item.nums < 0?'red':''">{{item.nums > 0 ? '+':''}}{{item.nums}}</p>
        </div>
        <div class="account-order flex-a-c flex-j-sb">
          <div class="account-time">{{item.created_at}}</div>
          <div class="account-time" v-if="item.remark !== null">{{item.remark}}</div>
        </div>
        
      </div>
    </block>
  </div>
  <van-empty description="暂无数据" v-else />
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bonusDetail_controller from './bonusDetail_controller';
export default bonusDetail_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .bonus-page {
    padding:0 0 3.75rem 0;
    .account-list {
      margin:0.5rem 0.75rem 0 0.75rem;
      
      .account-box {
        padding:12px;
        border-radius: 0.25rem;
        background-color:#FFFFFF;
        margin:0  0 0.5rem 0;
        .account-order {
          h3,p {
            font-size: 0.9375rem;
            color: #333333;
            font-weight: 400;
          }
          .red {
            color:#FE5E56;
          }
          .account-time {
            color: #999999;
            font-size: 0.75rem;
            padding: 0.625rem 0 0 0;
          }
        }
        .account-status {
            font-size: 12px;
            color: #838383;
        }
       
      }
    }
  }
</style>